<template>
    <div class="bi-menu">
        <div v-dropdown dropdown-body="body" :dropdown-width="bodyWidth"  >
            <bi-button :icon="icon" :type="handleType" :class="handleClass" v-if="!$slots.handle">{{title}}</bi-button>
            <slot name="handle"></slot>           
        </div>

        <div ref="body" class="dropdown-menu bi-menu-content" :class="bodyClass">
            <div class="header" v-if="$slots.header">
                <slot name="header"></slot> 
            </div>
            <slot></slot>
        </div>
    </div>
</template>

<script>

import BiButton from '../other/button.vue';
export default{
    components:{
        BiButton
    },
    props:{
        title:{
            type:String,
            default:''
        },
        icon:{
            type:String,
            default:'fa-bars'
        },
        handleClass:{
            type:String,
            default:''
        },
        handleType:{
            type:String,
            default:'light'
        },
        bodyClass:{
            type:String,
            default:''
        },
        bodyWidth:{
            type:[String,Number],
            default:''
        }
    },
    computed:{
        
    }
}
</script>


<style>
.bi-menu-content .header{
    margin-top: calc( var(--bs-dropdown-padding-y) * -1 ) ;
}

.bi-menu-content .header{
    margin-bottom: var(--bs-dropdown-padding-y);
}
</style>